<template>
    <div class="box">
        <Alert>
            <Form :model="searchObj" inline>
                <FormItem>
                    <Select v-model="searchObj.num" class="select-style" placeholder="请选择扫码次数">
                        <Option value="1">扫码1次人员</Option>
                        <Option value="2">扫码2次人员</Option>
                        <Option value="3">扫码3次人员</Option>
                        <Option value="4">扫码4次人员</Option>
                        <Option value="5">扫码5次人员</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <DatePicker v-model="searchObj.statsTime" type="datetimerange"
                                format="yyyy-MM-dd HH:mm:ss" placeholder="请选择统计时间段"
                                style="width: 350px"></DatePicker>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="searchAction">
                        <Icon type="ios-search"/>
                        搜索
                    </Button>
                </FormItem>
            </Form>
        </Alert>
        <Row>
            <vxe-toolbar export custom></vxe-toolbar>
            <vxe-table
                    border
                    resizable
                    highlight-hover-row
                    export-config
                    height="500"
                    size="medium"
                    show-overflow="tooltip"
                    :loading="tableLoading"
                    align="center"
                    header-align="center"
                    :sort-config="{trigger: 'cell'}"
                    :data="tableData"
                    :checkbox-config="{checkField: 'checked'}"
                    >
                <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
                <vxe-table-column field="name" title="姓名"></vxe-table-column>
                <vxe-table-column field="sex" title="性别"></vxe-table-column>
                <vxe-table-column field="age" title="年龄"></vxe-table-column>
                <vxe-table-column field="card_no" width="200" title="身份证号"></vxe-table-column>
                <vxe-table-column field="tel" title="手机号"></vxe-table-column>
                <vxe-table-column field="nickname" title="微信昵称"></vxe-table-column>
                <vxe-table-column field="type" title="状态"></vxe-table-column>
            </vxe-table>
        </Row>
    </div>
</template>

<script>
import {
  searchRepeatUserState
} from '@/api/pass'
import { formatDate } from '@/components/dateFormat'

export default {
  components: {},
  data () {
    return {
      statsTime: '',
      modalShow: false,
      modalTitle: '',
      modalType: '',
      modalWidth: 600,
      modalData: {},
      searchObj: {
        statsTime: '',
        num: ''
      },
      tableData: [],
      selectData: [],
      tableLoading: false
    }
  },
  methods: {
    searchAction () {
      if (this.searchObj.num !== '') {
        this.init()
      } else {
        this.$Message.warning('请选择扫码次数')
      }
    },
    init () {
      const startTime = this.searchObj.statsTime[0] !== '' ? formatDate(this.searchObj.statsTime[0], 'yyyy-MM-dd hh:mm:ss') : ''
      const endTime = this.searchObj.statsTime[1] !== '' ? formatDate(this.searchObj.statsTime[1], 'yyyy-MM-dd hh:mm:ss') : ''
      console.log(this.searchObj.startTime, '开始时间找到了')
      let data = {
        startTime: startTime,
        endTime: endTime,
        master_id: this.$route.query.verification_code,
        num: this.searchObj.num
      }
      if (startTime !== '' || endTime !== '') {
        this.tableLoading = true
        searchRepeatUserState(data).then(ret => {
          let data = ret.data
          if (data.errcode === 200) {
            this.tableData = data.data
            this.tableLoading = false
          } else {
            this.tableLoading = false
            this.error(data)
          }
        })
      } else {
        this.$Message.warning('请选择时间段')
      }
    }
  },
  mounted () {
  }
}
</script>

<style scoped>
    .ivu-form-item {
        margin-bottom: 0;
    }

    .box {
        margin-bottom: 50px;
    }

    .select-style {
        width: 300px;
        margin-left: 10px;
    }
</style>
